<script setup>
import {ref} from "vue";
import router from "@/router.js";
import {ApiRegister} from "@/api/user.js";
import favicon from "@/assets/favicon.ico";
import Toast from "primevue/toast";
import * as yup from "yup";
import {useForm} from "vee-validate";
import {useToast} from "primevue/usetoast";

const toast = useToast();
const isMobile = ref(window.innerWidth < 768);
const loading = ref(false)

let registerSchema = yup.object().shape({
    code: yup.string().max(20, '字符长度过多').required('该项必填'),
    username: yup.string().min(3, '字符长度过少').max(20, '字符长度过多').required('该项必填'),
    password: yup.string().min(6, '密码长度过少').max(30, '字符长度过多').required('该项必填'),
    confirmPassword: yup.string().required('该项必填').test('confirmPassword', '密码不匹配', () => {
        if (confirmPassword.value === password.value) {
            return true
        }
        return false
    }),
});

const {defineField, handleSubmit, errors} = useForm({
    validationSchema: registerSchema,
});

const [code] = defineField('code');
const [username] = defineField('username');
const [password] = defineField('password');
const [confirmPassword] = defineField('confirmPassword');

const onSubmit = handleSubmit(async (values) => {
    loading.value = true
    try {
        const result = await ApiRegister(values)
        if (result.code === 0) {
            toast.add({severity: 'success', summary: '成功', detail: '注册的成功', life: 3000});
            router.back()
        } else {
            toast.add({severity: 'danger', summary: '失败', detail: result.msg, life: 3000});
        }
    } finally {
        loading.value = false
    }
});

</script>

<template>
    <div style="background-color: #F0F2F5; height: 100vh; padding-top: 8%">
       <div class="p-4 shadow-2 border-round " :class="!isMobile ? 'w-2/5': 'w-4/5' " style="margin: 0 auto;background-color: white">
             <div class="flex flex-col mb-5 items-center">
                <img :src="favicon" alt="Image" height="50" width="50" class="mb-3"/>
                <div class="text-900 text-3xl font-medium mb-3">注册账号</div>
            </div>
            <div>
                <form @submit.prevent=onSubmit>
                    <label class="block text-900 font-medium mb-2 mt-3">注册码</label>
                    <InputText id='code' v-model="code" class="w-full" :class="{ 'p-invalid': errors.code }"/>
                    <small class="p-error">
                        {{ errors.code }}
                    </small>

                    <label class="block text-900 font-medium mb-2 mt-3">用户名</label>
                    <InputText id='username' v-model="username" class="w-full"
                               :class="{ 'p-invalid': errors.username }"/>
                    <small class="p-error">
                        {{ errors.username }}
                    </small>

                    <label class="block text-900 font-medium mb-2 mt-3">密码</label>
                    <Password id='password' v-model="password" class="w-full"
                              :class="{ 'p-invalid': errors.password }"/>
                    <small class="p-error">
                        {{ errors.password }}
                    </small>

                    <label class="block text-900 font-medium mb-2 mt-3">确认密码</label>
                    <Password :feedback="false" id='confirmPassword' v-model="confirmPassword" class="w-full"
                              :class="{ 'p-invalid': errors.confirmPassword }"/>
                    <small class="p-error">
                        {{ errors.confirmPassword }}
                    </small>

                    <div class="flex flex-row-reverse">
                        <Button severity="secondary" label="返回登录" class="mt-4"
                                @click="() => router.back()"></Button>
                        <Button type="submit" :loading="loading" label="注册" class="mt-4 mr-3"></Button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <Toast></Toast>
</template>

<style>
.p-password-input {
    width: 100% !important;
}
</style>